<template>
  <div>


    <el-radio-group v-model="labelPosition" size="small">
      <el-radio-button label="left">左对齐</el-radio-button>
      <el-radio-button label="right">右对齐</el-radio-button>
  <el-radio-button label="top">顶部对齐</el-radio-button>
    </el-radio-group>
    <div style="margin: 20px;"></div>
    <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
      <el-form-item label="角色名称">
        <el-input v-model="formLabelAlign.zh_name"></el-input>
      </el-form-item>
      <el-form-item label="英文名称">
        <el-input v-model="formLabelAlign.name"></el-input>
      </el-form-item>
      <el-form-item label="描述">
        <el-input v-model="formLabelAlign.description"></el-input>
      </el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="resetForm">重置</el-button>
    </el-form>

  </div>
</template>

<script>
  import {postAddRole} from '../../api/api'

  export default {

    data() {
      return {
        labelPosition: 'right',
        formLabelAlign: {
          zh_name: '',
          name: '',
          description: ''
        }
      }
    },
    methods: {
      submitForm() {
        postAddRole(this.formLabelAlign).then(res => {
          if (res.code == 200) {
            this.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success'
            })
          } else {
            this.$notify.error({
              title: '错误',
              message: '这是一条错误的提示消息'
            })
          }
          this.resetForm()
          }
        )
      },
      resetForm() {
        this.formLabelAlign = {};
      }


    }
  }
</script>
